<template>
	<view class="">
		<!-- 		<view class="address-title-header">
			<uv-navbar bgColor="transparent" titleStyle="color:#fff;font-weight: bold;" title="城伴" :safeAreaInsetTop="true">
				<template v-slot:left>
					<view class="u-nav-slot">
						<view class="header">
							<view class="city" @click="chooseAddress">
								<image src="/static/images/address.png" mode="aspectFill">
								</image>
								<text class="city-name" v-if="address==''">定位中</text>
								<text class="city-name " style="width: 260rpx;" v-if="address!=''">{{address}}</text>

							</view>
						</view>
					</view>
				</template>
			</uv-navbar>
			<view v-if="changestate==0" style="position: absolute;width: 690rpx;top: 180rpx;z-index: 999;">
				<view class="filter-item">
					<view class="item" @click="selectOne">
						<text class="select">{{text}}</text>
						<image src="@/static/images/down.png" mode="widthFix" v-if="!show">
						</image>
						<image src="@/static/images/up.png" mode="widthFix" v-else></image>
					</view>
					<view class="item" @click="selectTwo">
						<text class="select">{{text2}}</text>
						<image src="@/static/images/down.png" mode="widthFix" v-if="!show2"></image>
						<image src="@/static/images/up.png" mode="widthFix" v-else></image>
					</view>
					<view class="item-input">
						<input class="Input" type="text" v-model="keyword" />
						<view class="search-box">
							<image class="search-img" src="@/static/images/search.png" mode="aspectFill" @click="search" />
						</view>
					</view>
				</view>
				<view class="filter-select-box" v-if="show">
					<view class="select-item" @click="select(1)" :class="[currentIndex==1?'active':'']">
						距离优先
					</view>
					<view class="select-item" @click="select(2)" :class="[currentIndex==2?'active':'']">
						最新发布
					</view>
				</view>
				<view class="filter-select-box" style="margin: auto;height: 300rpx;margin-top: 20rpx;" v-if="show2">
					<view class="select-item" v-for="(selected,index) in friendDataList" :key="selected.id" @click="select2(selected.id,selected.name)" :class="[currentIndex2==selected.id?'active':'']">
						{{selected.name}}
					</view>
				</view>
			</view>
		</view> -->
		<swiper class="swiper" @change="change" @transition="onTransition" :vertical="true" v-if="taskList.length>0">
			<block v-for="(item,index) in taskList" :key="item.id">
				<swiper-item ref="swiperItem" data-type="video" class="swiper-item" v-if="checkMediaType(item.files[0])=='video'">
					<MyVideo :video="baseurl+'/'+ item.files[0]" :changestate="changestate">
						<template v-slot:myvideo>
							<view class="address-title-header">
								<uv-navbar :fixed="false" bgColor="transparent" leftIconSize="0" titleStyle="color:#fff;font-weight: bold;" title="找伴" :safeAreaInsetTop="true">
									<template v-slot:left>
										<view class="u-nav-slot">
											<view class="header">
												<view class="city" @click="chooseAddress">
													<image src="/static/images/address.png" mode="aspectFill">
													</image>
													<view class="city-name" v-if="address==''">定位中</view>
													<view class="city-name " style="width: 260rpx;line-height: 30rpx;" v-if="address!=''">{{address}}</view>

												</view>
											</view>
										</view>
									</template>
								</uv-navbar>
								<view v-if="changestate==0">
									<view class="filter-item">
										<view class="item" @click="selectOne">
											<text class="select">{{text}}</text>
											<image src="@/static/images/down.png" mode="widthFix" v-if="!show">
											</image>
											<image src="@/static/images/up.png" mode="widthFix" v-else></image>
										</view>
										<view class="item" @click="selectTwo">
											<text class="select">{{text2}}</text>
											<image src="@/static/images/down.png" mode="widthFix" v-if="!show2"></image>
											<image src="@/static/images/up.png" mode="widthFix" v-else></image>
										</view>
										<view class="item-input">
											<input class="Input" type="text" v-model="keyword" />
											<view class="search-box">
												<image class="search-img" src="@/static/images/search.png" mode="aspectFill" @click="search" />
											</view>
										</view>
									</view>
									<view class="filter-select-box" v-if="show">
										<view class="select-item select-item_c" @click="select(1)" :class="[currentIndex==1?'active':'']">
											距离优先
										</view>
										<view class="select-item select-item_c" @click="select(2)" :class="[currentIndex==2?'active':'']">
											最新发布
										</view>
									</view>
									<view class="filter-select-box gard" style="margin: auto;margin-top: 20rpx;" v-if="show2">
										<view class="select-item select-item_gard" v-for="(selected,index) in friendDataList" :key="selected.id" @click="select2(selected.id,selected.name)" :class="[currentIndex2==selected.id?'active':'']">
											{{selected.name}}
										</view>
									</view>
								</view>
								<view class="info-container">
									<view class="lock" v-if="item.claim==0">
										<image src="@/static/images/lock.png" mode="aspectFill"></image>
										<view class="lock-title">
											您已申领此任务
										</view>
									</view>
									<view class="lock" v-if="item.claim==1">
										<image src="@/static/images/lock.png" mode="aspectFill"></image>
										<view class="lock-title">
											您已经锁定此任务！
										</view>
									</view>
									
									<view class="uninter"  @click="uninter(item)">
										<image src="@/static/images/Uninterested.png" mode="aspectFill"></image>
										<view class="lock-title">
											不感兴趣
										</view>
									</view>
									<view class="info-box" style="padding: 50rpx 30rpx;" @click="toDetail(item.id)">
										<view class="header">
											<view class="left-text">
												<view class="title">
													<image class="left-img" src="../../static/images/left_title.png" mode="aspectFill"></image>
													<text class="middle-title">找伴任务</text>
													<image class="right-img" src="../../static/images/right_title.png" mode="aspectFill"></image>
												</view>
												<image style="margin-left: 20rpx;" src="@/static/images/shuoming.png" mode="widthFix" @click.stop="tipClick"></image>
											</view>
										</view>
										<view class="right-text" style="margin-top: 40rpx;">
											<text class="cost-title text-cut">赏金/费用1</text>
											<text class="cost">{{item.min_money}}~{{item.max_money}}</text>
											<text class="unit">元</text>
										</view>
										<view class="middle" style="padding: 36rpx 0;">
											<text class="type">{{item.type_text}}</text>
											<text class="content">{{item.title}}</text>
										</view>
										<view class="pay-time">
											交付时间：{{item.date}}
										</view>
										<view class="footer" style="padding-top: 30rpx;">
											<view class="pay-time">
												<uv-text :customStyle="{'color': '#666666','font-size': '28rpx','overflow': 'hidden !important','line-height': '34rpx'}" :lines="1" :text="`会面地标：${item.address}`"></uv-text>
											</view>
											<view class="km-number">
												{{item.distance}}
											</view>
										</view>
									</view>
									<view class="user-info">
										<view class="avator-img" @click="toUserPage(item.user_id)">
											<image v-if="item.user_info.avatar==''" src="@/static/images/avatar.png" mode="aspectFill"></image>
											<image v-else :src="baseurl+'/'+item.user_info.avatar" mode="aspectFill">
											</image>
										</view>
										<view class="nickname-item">
											<view class="nickname text-cut" style="line-height: 40rpx;">
												{{item.user_info.username=="微信用户"?'未知用户':item.user_info.username}}
											</view>
											<view style="display: flex;align-items: center;">
												<view class="gap" v-if="item.user_info.examine_text!=''">
													<view class="man-age">
														{{getTruncatedText(item.user_info.examine_text)}}
													</view>
												</view>
												<view class="age_noselect" v-else>
													<text>未知</text>
												</view>
												<view class="gap" style="margin-left: 8rpx;width: 104rpx;">
													<text class="age">互相关注</text>
												</view>
											</view>
										</view>
										<view class="btns-item">
											<view class="collect" style="height: 70rpx;">
												<!--  style="height: 80rpx;" -->
												<image src="@/static/images/no_apply.png" mode="widthFix" v-if="item.claim==-1" @click="applyTask(item,index)"></image>
												<image src="@/static/images/apply.png" mode="widthFix" v-if="item.claim==0||item.claim==1"></image>
												<image src="@/static/images/apply_err.png" mode="widthFix" v-if="item.claim==2"></image>
												<view class="num" style="margin-top: 16rpx;">
													<text v-if="item.claim==-1">申领</text>
													<!--<text v-if="item.claim==0">已申领</text> -->
													<text v-if="item.claim==0">{{item.claim_count}}人</text>
													<text v-if="item.claim==1" style="color: #4CA520;">{{item.claim_count}}人</text>
													<text v-if="item.claim==2" style="color: #FF5B5B;">申领失败</text>
												</view>
											</view>
											<view class="collect">
												<button open-type="share" plain :data-title="item.title" style="font-size: 0;height: 80rpx;border: 0;padding-top: 8rpx;">
													<image src="@/static/images/fenxiang.png" mode="widthFix"></image>
													<view class="num" style="margin-top: 16rpx;line-height: 0;">
														分享
													</view>
												</button>
											</view>
										</view>
										<view class="detail-btn" @click="toDetail(item.id)">
											<text class="detail-title">了解详情</text>
											<image src="@/static/images/enter_fff.png" mode="widthFix"></image>
										</view>
									</view>
									<view class="next" v-if="changestate==0&&changestate + 1 < total">
										<image src="@/static/images/slideup.png" mode="widthFix"></image>
										<text class="slide-up">上滑</text>
										<text class="next-task">查看下一个找伴任务</text>
									</view>
								</view>
							</view>
						</template>

					</MyVideo>
				</swiper-item>
				<swiper-item class="swiper-item" ref="swiperItem" data-type="img" v-else>
					<!-- <swiper class="swiper-container" :indicator-dots="true" in indicator-active-color="#fff"
					indicator-color="#ccc" :autoplay="false" :current="currentImgIndex" @change="changeswiper">
					<swiper-item v-for="(items, index) in item.files" :key="index" class="swiper-item"> -->
					<!-- <scroll-view scroll-y="true" @scrolltolower="scrollPage" style="height: 100%;"> -->
					<!-- <view class="swiper-img"
							:style="{ backgroundImage: 'url('+ baseurl+'/' + item.files[index % item.files.length] + ')' }"> -->
					<view class="swiper-img" :style="{ backgroundImage: 'url('+ baseurl+'/' + item.files[0] + ')' }">
						<view class="address-title-header">
							<uv-navbar :fixed="false" bgColor="transparent" leftIconSize="0" titleStyle="color:#fff;font-weight: bold;" title="找伴" :safeAreaInsetTop="true">
								<template v-slot:left>
									<view class="u-nav-slot">
										<view class="header">
											<view class="city" @click="chooseAddress">
												<image src="/static/images/address.png" mode="aspectFill">
												</image>
												<text class="city-name" v-if="address==''">定位中</text>
												<!--<text class="city-name" v-if="address!=''" @click="changeAddress">{{address}}</text> -->
												<text class="city-name " style="width: 260rpx;" v-if="address!=''">{{address}}</text>

											</view>
										</view>
									</view>
								</template>
							</uv-navbar>
							<view v-if="changestate==0">
								<view class="filter-item">
									<view class="item" @click="selectOne">
										<text class="select">{{text}}</text>
										<image src="@/static/images/down.png" mode="widthFix" v-if="!show">
										</image>
										<image src="@/static/images/up.png" mode="widthFix" v-else></image>
									</view>
									<view class="item" @click="selectTwo">
										<text class="select">{{text2}}</text>
										<image src="@/static/images/down.png" mode="widthFix" v-if="!show2"></image>
										<image src="@/static/images/up.png" mode="widthFix" v-else></image>
									</view>
									<view class="item-input">
										<input class="Input" type="text" v-model="keyword" />
										<view class="search-box">
											<image class="search-img" src="@/static/images/search.png" mode="aspectFill" @click="search" />
										</view>
									</view>
								</view>
								<view class="filter-select-box" v-if="show">
									<view class="select-item select-item_c" @click="select(1)" :class="[currentIndex==1?'active':'']">
										距离优先
									</view>
									<view class="select-item select-item_c" @click="select(2)" :class="[currentIndex==2?'active':'']">
										最新发布
									</view>
								</view>
								<view class="filter-select-box gard" style="margin: auto;margin-top: 20rpx;" v-if="show2">
									<!-- <scroll-view scroll-y="true" style="height: 250rpx;"> -->
									<view class="select-item select-item_gard" v-for="(selected,index) in friendDataList" :key="selected.id" @click="select2(selected.id,selected.name)" :class="[currentIndex2==selected.id?'active':'']">
										{{selected.name}}
									</view>
									<!-- </scroll-view> -->
								</view>
							</view>

							<view class="info-container">
								<view class="lock" v-if="item.claim==0">
									<image src="@/static/images/lock.png" mode="aspectFill"></image>
									<view class="lock-title">
										您已申领此任务
									</view>
								</view>
								<view class="lock" v-if="item.claim==1">
									<image src="@/static/images/lock.png" mode="aspectFill"></image>
									<view class="lock-title">
										您已经锁定此任务！
									</view>
								</view>
								<view class="uninter" @click="uninter(item)">
									<image src="@/static/images/Uninterested.png" mode="aspectFill"></image>
									<view class="lock-title">
										不感兴趣
									</view>
								</view>
								<view class="info-box" @click="toDetail(item.id)">
									<view class="" style="display: flex;justify-content: space-between;">
									<view class="header">
										<view class="left-text">
											<view class="title">
												<image class="left-img" src="../../static/images/left_title.png" mode="aspectFill"></image>
												<text class="middle-title">找伴任务</text>
												<image class="right-img" src="../../static/images/right_title.png" mode="aspectFill">
												</image>
											</view>
											<image style="margin-left: 20rpx;" src="@/static/images/shuoming.png" mode="widthFix" @click.stop="tipClick"></image>
										</view>
										<!-- 			<view class="right-text">
												<text class="cost-title text-cut">赏金/费用</text>
												<text class="cost">{{item.min_money}}~{{item.max_money}}</text>
												<text class="unit">元</text>
											</view> -->
									</view>
									<view class="right-text" style="width: 600rpx;">
										<text class="cost-title text-cut">赏金/费用</text>
										<text class="cost">{{item.min_money}}~{{item.max_money}}</text>
										<text class="unit">元</text>
									</view>
									</view>
									<view class="middle">
										<text class="type">{{item.type_text}}</text>
										<text class="content text-cut">{{item.title}}</text>
									</view>
									<view class="pay-time">
										交付时间：{{item.date}}
									</view>
									<view class="footer">
										<view class="pay-time" style="overflow: hidden;">
											<uv-text :customStyle="{'color': '#666666','font-size': '28rpx'}" :lines="1" :text="`会面地标：${item.address}`"></uv-text>
										</view>
										<view class="km-number">
											{{item.distance}}
										</view>
									</view>
								</view>
								<view class="user-info">
									<view class="avator-img" @click="toUserPage(item.user_id)">
										<image v-if="item.user_info.avatar==''" src="@/static/images/avatar.png" mode="aspectFill"></image>
										<image v-else :src="baseurl+'/'+item.user_info.avatar" mode="aspectFill">
										</image>
									</view>
									<view class="nickname-item">
										<view class="nickname text-cut">
											{{item.user_info.username=="微信用户"?'未知用户':item.user_info.username}}
										</view>
										<view style="display: flex;align-items: center;">
											<view class="gap" v-if="item.user_info.examine_text!=''">
												<view class="man-age">
													{{getTruncatedText(item.user_info.examine_text)}}
												</view>
											</view>
											<view class="age_noselect" v-else>
												<text>未知</text>
											</view>
											<view class="gap" style="margin-left: 8rpx;width: 104rpx;">
												<text class="age">互相关注</text>
											</view>
										</view>
									</view>

									<view class="btns-item">
										<view class="collect">
											<image src="@/static/images/no_apply.png" mode="widthFix" v-if="item.claim==-1" @click="applyTask(item,index)"></image>
											<image src="@/static/images/apply.png" mode="widthFix" v-if="item.claim==0||item.claim==1"></image>
											<image src="@/static/images/apply_err.png" mode="widthFix" v-if="item.claim==2"></image>
											<view class="num">
												<text v-if="item.claim==-1">申领</text>
												<text v-if="item.claim==0">{{item.claim_count}}人</text>
												<text v-if="item.claim==1" style="color: #4CA520;">{{item.claim_count}}人</text>
												<text v-if="item.claim==2" style="color: #FF5B5B;">申领失败</text>
											</view>
										</view>
										<view class="collect">
											<button open-type="share" plain :data-title="item.title" style="font-size: 0;line-height: inherit;border: 0;padding-top: 8rpx;">
												<image style="width: 44rpx;height: 44rpx;" src="@/static/images/fenxiang.png" mode="aspectFill"></image>
												<view class="num">
													分享
												</view>
											</button>
										</view>
									</view>
									<view class="detail-btn" @click="toDetail(item.id)">
										<text class="detail-title">了解详情</text>
										<image src="@/static/images/enter_fff.png" mode="widthFix"></image>
									</view>
								</view>
								<!-- <view class="next" v-if="changestate + 1 < total"> -->
								<view class="next" v-if="changestate==0&&changestate + 1 < total">
									<image src="@/static/images/slideup.png" mode="widthFix"></image>
									<text class="slide-up">上滑</text>
									<text class="next-task">查看下一个找伴任务</text>
								</view>
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->

					<!-- 					</swiper-item>
				</swiper> -->
				</swiper-item>
			</block>
		</swiper>
		<view class="address-title-header" v-if="taskList.length==0">
			<uv-navbar :fixed="false" leftIconSize="0" titleStyle="color:#333;font-weight: bold;" title="找伴" :safeAreaInsetTop="true">
				<template v-slot:left>
					<view class="u-nav-slot">
						<view class="header">
							<view class="city" @click="chooseAddress">
								<!-- @click="changeAddress" -->
								<image src="@/static/images/chat_address.png" mode="aspectFill"></image>
								<text class="city-name" style="color: #333;" v-if="address==''">定位中</text>
								<text class="city-name" style="color: #333;" v-if="address!=''" >{{address}}</text>
							</view>
						</view>
					</view>
				</template>
			</uv-navbar>
			<view class="filter-item">
				<view class="item" @click="selectOne">
					<text class="select">{{text}}</text>
					<image src="@/static/images/down.png" mode="widthFix" v-if="!show">
					</image>
					<image src="@/static/images/up.png" mode="widthFix" v-else></image>
				</view>
				<view class="item" @click="selectTwo">
					<text class="select">{{text2}}</text>
					<image src="@/static/images/down.png" mode="widthFix" v-if="!show2"></image>
					<image src="@/static/images/up.png" mode="widthFix" v-else></image>
				</view>
				<view class="item-input">
					<input class="Input" type="text" v-model="keyword" />
					<view class="search-box">
						<image class="search-img" src="@/static/images/search.png" mode="aspectFill" @click="search" />
					</view>
				</view>
			</view>
			<view class="filter-select-box" v-if="show">
				<view class="select-item select-item_c" @click="select(1)" :class="[currentIndex==1?'active':'']">
					距离优先
				</view>
				<view class="select-item select-item_c" @click="select(2)" :class="[currentIndex==2?'active':'']">
					最新发布
				</view>
			</view>
			<view class="filter-select-box gard" style="margin: auto; margin-top: 20rpx;" v-if="show2">
				<view class="select-item select-item_gard" v-for="(selected,index) in friendDataList" :key="selected.id" @click="select2(selected.id,selected.name)" :class="[currentIndex2==selected.id?'active':'']">
					{{selected.name}}
				</view>
			</view>
			<view style="margin:300rpx auto;" v-if="taskList.length==0">
				<KongList title="列表为空"></KongList>
			</view>
		</view>
	</view>

	<!-- 任务须知 -->
	<uv-popup :round="15" ref="showRef" mode="center" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
		<view class="tips-popup">
			<view class="tips-title">
				任务须知
			</view>
			<view class="tips-conent">
			<uv-parse :content="content"></uv-parse>
			</view>
			<view class="know-btn" @click="showRef.close()">
				知道了
			</view>
		</view>
	</uv-popup>
	<!-- 任务申领 -->
	<uv-popup ref="taskApplyRef" mode="center" :round="15" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
		<view class="register-popup" style="width: 630rpx;">
			<view class="register-title">
				<view class="title">
					提示
				</view>
			</view>
			<view class="tips" style="padding: 100rpx 0 20rpx 0; ">
				是否申请申领此任务？
			</view>
			<view class="footer-btn">
				<view class="cancel" @click="taskApplyRef.close()">
					取消
				</view>
				<view class="confirm" @click="apply">
					申请
				</view>
			</view>
		</view>
	</uv-popup>
	<cityPicker :column="column" :addressList="mapDataList" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="addressConfirm" @cancel="visible=false" :visible="visible" />
	<tabbar :current="1" :getTaskList="propsAddress"></tabbar>
</template>
<script setup>
	import { onLoad, onShow, onReady, onReachBottom, onPullDownRefresh, onShareAppMessage } from '@dcloudio/uni-app'
	import { userClaimTaskAPI } from '@/api/user.js'
	import { ref, onMounted, reactive } from 'vue'
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import KongList from '@/components/KongList.vue'
	import { useActiveStore } from "@/store/modules/active.js"
	import { useUserStore } from "@/store/modules/user.js"
	import { getCityIdAPI } from '@/api/user.js'
	import { throttle } from '@/utils/utils.js';
	import MyVideo from '@/components/MyVideo.vue'
	import tabbar from '@/components/tabbar/tabbar'
	const activeStore = useActiveStore()
	const userStore = useUserStore()
	const keyword = ref('')
	const showRef = ref()
	const show = ref(false)
	const show2 = ref(false)
	const changestate = ref(0)
	const screenHeight = ref(0)
	const currentImgIndex = ref(0)
	const currentIndex = ref(1)
	const currentIndex2 = ref(0)
	const text = ref('距离优先')
	const text2 = ref('全部')
	const taskList = ref([])
	const page = ref(1)
	const count = ref(0)
	const loadStatus = ref('loadmore')
	const baseurl = ref('')
	const friendDataList = ref([])
	const content = ref([])
	const total = ref(0)
	const address = ref('')
	const taskApplyRef = ref()
	const taskItem = ref({})
	// 控制选择器显示和隐藏
	const visible = ref(false)
	// 点击模态框是否关闭弹框
	const maskCloseAble = ref(true)
	// 初始地区编码（例:或者['河北省','唐山市','丰南区']）
	const defaultValue = ref('')
	// 2是省市两列选择；3是省市区三列选择
	const column = ref(2)
	const mapDataList = ref([])
	onLoad(() => {
	
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				getAddress(res.latitude, res.longitude)
			},
			fail: (err) => {
				uni.$uv.toast('定位失败，请手动选择')
			}
		});
		baseurl.value = uni.getStorageSync('baseUrl')
		// address.value = uni.getStorageSync('cityName')
		getFriendData()
		// getAddress(uni.getStorageSync('latitude'), uni.getStorageSync('longitude'))
		// getTaskList()


	})
	onShow(() => {

	})
	onReady(() => {

	})
	// 地理位置逆解析
	const getAddress = (latitude, longitude) => {
		console.log('地理位置逆解析')
		uni.request({
			url: `https://apis.map.qq.com/ws/geocoder/v1?location=${latitude},${longitude}&key=BLWBZ-5A6CZ-SZ3XY-7QWE6-Z3X63-CGF5W&get_poi=1`,
			success: (res) => {
				if (res.data.status == 0) {
					console.log(res.data.result)
					address.value = res.data.result.formatted_addresses.recommend
					// getCityIdAPI({ lat: latitude, lng: longitude }).then(res => {
					// 	uni.setStorageSync('cityId', res.data.city_id)
					// 	page.value = 1
					// 	activeList.value = []
					// })
					getTaskList()
				} else {
					uni.$uv.toast('获取位置失败，请手动选择')
				}
			}
		})
	}
	const getTruncatedText = (text) => {
		return text!='未认证'? text.length > 2 ? text.substring(0, 2) : text:text;
	}
	onShareAppMessage((res) => {
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target.dataset.title)
		}
		return {
			title: res.target.dataset.title,
			path: '/pages/friends/index',
			imageUrl: '/static/images/banner.png'
		}
	})

	// onPullDownRefresh(() => {
	// 	page.value = 1
	// 	taskList.value = []
	// 	getTaskList()
	// 	setTimeout(() => {
	// 		uni.stopPullDownRefresh()
	// 	}, 600)
	// })
	// 地理位置逆解析
	// const getAddress = (latitude, longitude) => {
	// 	uni.request({
	// 		url: `https://apis.map.qq.com/ws/geocoder/v1?location=${latitude},${longitude}&key=BLWBZ-5A6CZ-SZ3XY-7QWE6-Z3X63-CGF5W&get_poi=1`,
	// 		success: (res) => {
	// 			let result = res.data.result.address_component
	// 			address.value = result.city
	// 			page.value = 1
	// 			taskList.value = []
	// 			getTaskList()
	// 		}
	// 	})
	// }
	// 传递的位置
	const propsAddress = () => {
		page.value = 1
		taskList.value = []
		changestate.value = 0
		getTaskList()
		// uni.request({
		// 	url: `https://apis.map.qq.com/ws/geocoder/v1?location=${uni.getStorageSync('latitude')},${uni.getStorageSync('longitude')}&key=BLWBZ-5A6CZ-SZ3XY-7QWE6-Z3X63-CGF5W&get_poi=1`,
		// 	success: (res) => {
		// 		let result = res.data.result.address_component
		// 		address.value = result.city
		// 		page.value = 1
		// 		taskList.value = []
		// 		changestate.value = 0
		// 		getTaskList()
		// 	}
		// })
	}
	// 选择位置
	const chooseAddress = () => {
		uni.chooseLocation({
			success: function(res) {
				console.log(res, '========')
				page.value = 1
				taskList.value = []
				address.value = res.name
				getCityIdAPI({ lat: res.latitude, lng: res.longitude }).then(resf => {
					getTaskList(res.latitude, res.longitude, resf.data.city_id)
				})

			},
			fail: (e) => {
				console.log(e, '========')
			}
		});
	}
	// 改变当前位置
	const changeAddress = async () => {
		let res = await userStore.getMapDataList()
		if (res.code == 200) {
			mapDataList.value = res.data
			visible.value = true
		}
	}
	// 确认地址
	const addressConfirm = (val) => {
		console.log(val)
		uni.setStorageSync('cityName', val.cityName)
		uni.setStorageSync('cityId', val.cityCode)
		address.value = uni.getStorageSync('cityName')
		page.value = 1
		taskList.value = []
		getTaskList()
		visible.value = false
	}
	// 搜索
	const search = () => {
		page.value = 1
		taskList.value = []
		getTaskList()
	}
	// 判断数组中是图片还是视频
	const checkMediaType = (url) => {
		// 获取路径的最后一个点之后的内容作为文件扩展名
		var extension = url.split('.').pop().toLowerCase();
		// 声明支持的图片和视频文件扩展名
		var imageExtensions = ['jpg', 'jpeg', 'gif', 'png', 'ico'];
		var videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];
		// 判断文件扩展名是否在图片扩展名数组中
		if (imageExtensions.includes(extension)) {
			return 'image';
		}
		// 判断文件扩展名是否在视频扩展名数组中
		if (videoExtensions.includes(extension)) {
			return 'video';
		}
		// 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
		return null;
	}
	// 去用户主页
	const toUserPage = (userId) => {
		uni.navigateTo({
			url: '/pages/user/userpage/index?userId=' + userId
		})
	}
	const toDetail = (taskId) => {
		uni.navigateTo({
			url: '/pages/release/taskdetail/index?taskId=' + taskId
		})
	}
	// 任务须知
	const tipClick = async () => {
		let res = await userStore.getConFig({
			type: 'taskTips'
		})
		if (res.code == 200) {
			content.value = res.data.content
			showRef.value.open()
		}
	}
	const change = (e) => {
		// console.log('弹窗打开状态：', e);
		changestate.value = e.detail.current
		if (e.detail.current + 1 >= total.value) {
			return uni.$uv.toast('最后一页喽~')
		}
		if ((e.detail.current + 1) % 10 == 0) {
			page.value++
			getTaskList()
		}
	}
	const changeswiper = (e) => {
		currentImgIndex.value = e.detail.current
	}
	// 点击筛选框1时
	const selectOne = () => {
		show.value = !show.value
		show2.value = false
	}
	// 点击筛选框2时
	const selectTwo = () => {
		show2.value = !show2.value
		show.value = false
	}
	// 筛选条件选择
	const select = (e) => {
		currentIndex.value = e
		if (currentIndex.value == 1) {
			text.value = '距离优先'
		} else {
			text.value = '最新发布'
		}
		show.value = false
		page.value = 1
		taskList.value = []
		getTaskList()
	}
	// 类型筛选框
	const select2 = (id, name) => {
		show.value = false
		currentIndex2.value = id
		text2.value = name
		show2.value = false
		page.value = 1
		taskList.value = []
		getTaskList()
	}
	// 获取找伴类型
	const getFriendData = async () => {
		let res = await userStore.getConFig({
			type: 'userTaskTeamType'
		})
		if (res.code == 200) {
			friendDataList.value = res.data.content
			friendDataList.value.unshift({
				id: 0,
				name: '全部'
			})
		}
	}
	// 获取任务列表
	const getTaskList = async (latitude, longitude, cityId) => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		let params = {
			lat: latitude ? latitude : uni.getStorageSync('latitude'),
			lng: longitude ? longitude : uni.getStorageSync('longitude'),
			search_order: currentIndex.value,
			page: page.value,
			search_type: currentIndex2.value,
			search_text: keyword.value,
			city_id: cityId ? cityId : uni.getStorageSync('cityId')
		}
		if (text2.value == '全部') {
			delete params.search_type
		}
		let res = await activeStore.getTaskList(params)
		if (res.code == 200) {
			uni.hideLoading()
			total.value = res.data.total
			let userid=JSON.parse(uni.getStorageSync('user'))?.userInfo?.id
			
			if (page.value == 1) {
				
				taskList.value = res.data.data.filter(item=>item.user_id!=userid)
				
			} else {
				const filteredNewData = res.data.data.filter(item => item.user_id != userid);
				taskList.value = [...taskList.value, ...filteredNewData];
			}
		}
	}
	// 申领任务
	const applyTask = (item) => {
		taskItem.value = item
		taskApplyRef.value.open()
	}
	const apply = () => {
		userClaimTaskAPI({ user_task_id: taskItem.value.id }).then(res => {
			taskApplyRef.value.close()
			taskItem.value.claim = 0
			taskItem.value.claim_count += 1
		})
	}
	const uninter=(val)=>{
		
		if (taskList.value && Array.isArray(taskList.value)) {
		  taskList.value = taskList.value.filter(item => item.id !== val.id);
		}
		
	}
	// 收藏任务
	// const favoriteTask = throttle(async (item) => {
	// 	let res = await activeStore.favoriteTask({
	// 		user_task_id: item.id
	// 	})
	// 	if (res.code == 200) {
	// 		// getTaskList()
	// 		item.favorite=1
	// 		item.favorite_count++
	// 	}
	// }, 200)
	// // 取消收藏任务
	// const cancelFavoriteTask = throttle(async (item) => {
	// 	let res = await activeStore.cancelFavoriteTask({
	// 		user_task_id: item.id
	// 	})
	// 	if (res.code == 200) {
	// 		// getTaskList()
	// 		item.favorite=0
	// 		item.favorite_count--
	// 	}
	// }, 200)
</script>
<style>
	.uv-line-1 {
		overflow: inherit !important;
	}
</style>
<style lang="scss" scoped>
	// 改变dot样式
	::v-deep .swiper-container .wx-swiper-dot-active {
		width: 130rpx !important;
		height: 6rpx;
		border-radius: 4rpx;
	}

	::v-deep .swiper-container .wx-swiper-dot {
		width: 130rpx !important;
		height: 6rpx;
		border-radius: 4rpx;
	}

	::v-deep.swiper-container .wx-swiper-dots-horizontal .wx-swiper-dot {
		margin-right: 6rpx;
	}

	.swiper-container {
		height: calc(100vh - 96rpx - env(safe-area-inset-bottom));
	}

	.swiper {
		width: 100vw;
		height: calc(100vh - 96rpx - env(safe-area-inset-bottom));
	}

	.swiper-item {
		width: 100vw;
		height: calc(100vh - 96rpx - env(safe-area-inset-bottom));
	}

	.swiper-img {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		width: 100%;
		height: 100%;
	}

	.filter-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 54rpx;

		.item {
			width: 210rpx;
			height: 64rpx;
			line-height: 64rpx;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			text-align: center;

			.select {
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			image {
				margin-left: 18rpx;
				width: 20rpx;
				height: 20rpx;
			}
		}

		.item-input {
			display: flex;
			align-items: center;
			width: 210rpx;
			height: 64rpx;
			padding: 0 20rpx;
			line-height: 64rpx;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			.Input {
				color: #fff;
				flex: 1;
			}

			.search-box {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;
				width: 50rpx;
				height: 50rpx;

				.search-img {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}

	.gard {
		display: grid;
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.filter-select-box {
		margin-top: 20rpx;
		padding: 30rpx;
		width: 260rpx;
		// height: 182rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 32rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.select-item {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;

			&.active {
				color: #FE3052;
			}
		}

		.select-item_gard {
			height: 60rpx;
			line-height: 60rpx;
		}
	}

	.address-title-header {
		padding: 0 30rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.city {
				display: flex;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: -30rpx;
					padding-right: 10rpx;
				}

				.city-name {
					// margin-left: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					font-style: normal;
					text-transform: none;
				}
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.info-container {
		position: fixed;
		bottom: 0rpx;
		// pointer-events: none;
		/* 确保文本不会阻挡视频的交互事件 */
		transform: translate(-50%, -60rpx);
		left: 50%;
		
		.lock {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: auto;
			margin-bottom: 40rpx;
			// width: 280rpx;
			max-width: 340rpx;
			height: 64rpx;
			background-color: rgba(116, 116, 116, 0.5);
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.lock-title {
				padding-left: 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.uninter{
			float: right;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			// width: 280rpx;
			width: 110rpx;
			height: 110rpx;
			font-size: 24rpx;
			
			background-color: rgba(116, 116, 116, 0.5);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			color: #fff;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.info-box {
			overflow: hidden;
			margin: auto;
			width: 690rpx;
			background: #FFFFFF;
			padding: 30rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.header {
				.left-text {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.title {
						.left-img {
							width: 30rpx;
							height: 24rpx;
						}

						.middle-title {

							font-family: PingFang SC, PingFang SC;
							font-weight: 800;
							font-size: 32rpx;
							color: #222222;
							text-align: left;
						}

						.right-img {
							width: 24rpx;
							height: 24rpx;
						}
					}

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}


			}

			.right-text {
				// display: flex;
				// align-items: flex-end;

				.cost-title {
					align-self: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}

				.cost {
					padding-left: 20rpx;
					font-weight: 800;
					font-size: 48rpx;
					color: #FE3052;
				}

				.unit {
					font-weight: 800;
					font-size: 24rpx;
					color: #FE3052;
				}
			}

			.middle {
				display: flex;
				align-items: center;
				padding: 26rpx 0;

				.type {
					display: inline-block;
					width: 112rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #E8F1FF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #2072FF;
					text-align: center;
				}

				.content {
					padding-left: 12rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}
			}

			.pay-time {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666 !important;
			}

			.footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;

				.km-number {
					font-weight: 400;
					font-size: 24rpx;
					color: #FE3052;
				}
			}
		}

		.user-info {
			display: flex;
			align-items: center;
			padding: 52rpx 0 50rpx 0;
			background: #111111;
			width: 750rpx;
			padding: 30rpx 30rpx;
			margin: 30rpx 0;

			.avator-img {

				width: 80rpx;
				height: 80rpx;

				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}

			.nickname-item {
				width: 35%;
				padding-left: 20rpx;

				.nickname {
					padding-bottom: 8rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.gap {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 88rpx;
					height: 32rpx;
					background: #FFF1F3;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					image {
						width: 20rpx;
						height: 20rpx;
					}

					.age {
						font-weight: 400;
						font-size: 20rpx;
						color: #FF4770;
					}
				}
			}

			.btns-item {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				flex: 1;

				.collect {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					.num {
						margin-top: 4rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #D8D8D8;
					}
				}
			}

			.detail-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 166rpx;
				height: 80rpx;
				line-height: 62rpx;
				background: #FE3052;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;

				.detail-title {
					padding-right: 8rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				image {
					width: 22rpx;
					height: 22rpx;
				}
			}
		}

		.next {
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 378rpx;
			height: 66rpx;
			background: #FFFFFF;
			border-radius: 36rpx 36rpx 36rpx 36rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.slide-up {
				padding: 0 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FE3052;
			}

			.next-task {
				font-weight: 400;
				font-size: 24rpx;
				color: #222;
			}
		}
	}

	.tips-popup {
		width: 630rpx;

		.tips-title {
			padding: 40rpx 0 60rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			text-align: center;
		}

		.tips-conent {
			padding: 0 50rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}

		.know-btn {
			width: 550rpx;
			height: 88rpx;
			background: #FE3052;
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: 60rpx auto 40rpx auto;
		}
	}

	.man-age {
		padding-left: 4rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #2484FF;
		text-align: center;
	}

	.woman-age {
		padding-left: 4rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #FF4770;
		text-align: center;
	}

	.register-popup {
		padding: 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}
		}

		.tips {
			padding: 100rpx 0;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;

			.cancel {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #F6F6F6;
				color: #666666;
			}

			.confirm {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #FE3052;
				color: #fff;
			}
		}
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.city {
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: -30rpx;
				padding-right: 10rpx;
			}

			.city-name {
				// margin-left: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				font-style: normal;
				text-transform: none;
				width: 260rpx;
				display: -webkit-box !important;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical !important;
			}
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.select-item_c {
		height: 60rpx;
		line-height: 60rpx;
	}
</style>